<template>
    <div>
         <el-popover placement="bottom-start" width="470" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" label-width="100px" :model="searchList" class="demo-ruleForm">
                <el-form-item label="去除时间" style="margin: 5px 0 0;"><el-date-picker v-model="searchList.time"  type="daterange" style="width: 305px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
                <el-button type="primary" @click="submitSearchData" style="margin: 7px 0 0 5px;padding: 7px 15px;">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
        <el-button type="primary" style="margin-left:5px;" @click="addCost">添加</el-button>
        <!-- <el-table :data="tableData">
            <el-table-column prop="no" label="编号" ></el-table-column>
            <el-table-column prop="name" label="名称" ></el-table-column>
            <el-table-column prop="rule" label="规格" ></el-table-column>
            <el-table-column prop="count" label="数量" ></el-table-column>
            <el-table-column prop="beCouster" label="所属客户" ></el-table-column>
            <el-table-column prop="status" label="状态" ></el-table-column>
            <el-table-column prop="createTime" label="去除时间" ></el-table-column>
            <el-table-column prop="mark" label="备注" ></el-table-column>
        </el-table> -->
        <el-tabs v-model="mainActiveName" @tab-click="syschRecodeStatus">
            <el-tab-pane label="已热合" name="0">
                <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
                <ul>
                    <li v-for="item in tableData" class="showDataLi">
                        <div class="showDataTop">
                        <div class="showDataTopLeft">
                            <img v-if="item.sampleid" :src="'data:image/png;base64,'+ item.sampleid" class="showDataImg" />
                        </div>
                        <div class="showDataTopCenter">
                            <div style="width:99%;height:30px;">
                                <div style="font-size:16px;font-weight:bolder;float:left;">
                                    {{item.providerNoName}}
                                </div>
                                <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                                    {{item.sampleName=== '1'? '男':'女'}}&nbsp;{{item.no!=null?35:20}}岁
                                </div>
                            </div>
                            <div style="width:99%;height:70px;font-size:13px;color:gray;">
                            <div>编号：{{item.no}}</div>
                            <div style="margin-top:3px;">名称：{{item.name}}</div>
                            <div style="margin-top:3px;">规格：{{item.rule}}</div>
                            <div style="margin-top:3px;">数量:{{item.count}}</div>
                            <div style="margin-top:3px;">去除时间:{{item.createTime}}</div>
                            </div>
                        </div>
                        <div class="showDataTopRight">
                            <div   v-if="item.status == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                            已热合
                            </div>
                            <div   v-if="item.status != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                            未热合
                            </div>
                        </div>

                        </div>
                        <div class="showDataFoot" >
                            详情
                        </div>
                    </li>              
                </ul>
                </div>
                <div class="divfooter">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="未热合" name="1">
                <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
                <ul>
                    <li v-for="item in tableData" class="showDataLi">
                        <div class="showDataTop">
                        <div class="showDataTopLeft">
                            <img v-if="item.sampleid" :src="'data:image/png;base64,'+ item.sampleid" class="showDataImg" />
                        </div>
                        <div class="showDataTopCenter">
                            <div style="width:99%;height:30px;">
                                <div style="font-size:16px;font-weight:bolder;float:left;">
                                    {{item.providerNoName}}
                                </div>
                                <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                                    {{item.sampleName=== '1'? '男':'女'}}&nbsp;{{item.no!=null?35:20}}岁
                                </div>
                            </div>
                            <div style="width:99%;height:70px;font-size:13px;color:gray;">
                            <div>编号：{{item.no}}</div>
                            <div style="margin-top:3px;">名称：{{item.name}}</div>
                            <div style="margin-top:3px;">规格：{{item.rule}}</div>
                            <div style="margin-top:3px;">数量:{{item.count}}</div>
                            <div style="margin-top:3px;">去除时间:{{item.createTime}}</div>
                            </div>
                        </div>
                        <div class="showDataTopRight">
                            <div   v-if="item.status == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                            已热合
                            </div>
                            <div   v-if="item.status != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                            未热合
                            </div>
                        </div>

                        </div>
                        <div class="showDataFoot" >
                            详情
                        </div>
                    </li>              
                </ul>
                </div> 
                <div class="divfooter">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>       
                </div>       
            </el-tab-pane>    
        </el-tabs>
        <el-dialog title="新增去除液" :visible.sync="isShowAddDialog" width="30%" top="60px"  :close-on-click-modal="false">
            <el-form :inline="true" :model="untreatData" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="名称:"><el-input v-model="untreatData.cardId" ></el-input></el-form-item><br/>
                        <el-form-item label="类型:"><el-input v-model="untreatData.providerName" ></el-input></el-form-item><br/>
                        <el-form-item label="数量:"><el-input v-model="untreatData.age" ></el-input></el-form-item><br/>
                        <el-form-item label="规格:"><el-input v-model="untreatData.age" ></el-input></el-form-item><br/>
                        <el-form-item label="备注:"><el-input v-model="untreatData.sex"  type="textarea"></el-input></el-form-item>
            </el-form> 
            <el-button type="primary" style="float:right;maring-bottom:10px;"   >保存</el-button>  <br/>  
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data(){
            return{
            mainActiveName:'0',
            isState:1,
            isShowAddDialog:false,
            searchList:{
                time:new Date(),
            },
            untreatData:{},
            tableData:[
                {no:1,name:'纯浆',rule:'3x3',beCouster:'张三',count:15,createTime:this.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss'),mark:'去除液记录',status:'已热合'}
            ],
            pagination:{
                currentPage:1,
                pageSize:10,
                total:0
            }, 
            }
        },
        computed:{
            divAutoHeight(){
                return this.$store.state.clientHeight-100;
            },
        },
        components:{
        },
        methods:{
            syschRecodeStatus(ins){
                let self = this;
                switch (ins.name) {
                case '1':
                    // self.search.recodeStatus=1;
                    // self.getData();
                    break;
                case '0':
                    // self.search.recodeStatus=0;
                    // self.getData();
                    break;   
                default:
                    break;
                }
            },            
            addUntreated(){},
            addCost(){
                let self = this;
                self.isShowAddDialog = true;
            },
            closeCostDialog(){
                let self = this;
                self.isShowAddDialog = false;
            },
        }
    }
</script>

<style scoped>
    .showDataLi{
        width:400px;
        height:200px;
        border:1px solid rgba(0,0,0,0.1);
        background: white;
        box-shadow : 0px 0px 8px rgba(216,216,216,0.9);
        float:left;
        margin-left: 10px;
        margin-top:10px;
        border-radius: 10px;
        overflow-y:hidden;
        cursor:pointer;
    }
    .showDataLi:hover{
        border:1px solid rgba(0,0,0,0.2);
        box-shadow : 0px 0px 13px rgba(0,0,0,0.3);
    }
    
    .showDataTop{
        width:398px;
        height:152px;
    }
    .showDataFoot{
        border-top:1px solid rgba(216,216,216,0.5);
        width:100%;
        height:51px;
        text-align:center;
        line-height:50px;
        background:#F9FAFC;
        font-size:14px;
        color:rgba(0,0,0,0.5);
    }
    .showDataFootLeft,.showDataFootRight{
        width:50%;
        height:51px;
        color:black;
        float:left;
        margin-left:0px;
    }
    .showDataFootLeft:hover,.showDataFootRight:hover{
        color:#03BC89;
        background:rgba(216,216,216,0.4);
        font-weight:bolder;
    }
    .showDataFoot:hover{
    }

    .showDataTopLeft{
        border:0px solid blue;
        width:80px;
        height:82px;
        float:left;
        margin-left:10px;
        margin-top:20px;
        border-radius: 42px;
        overflow-y:hidden;
    }
    .showDataImg{
        width:100%;
        margin-top:-2px;
    }
    .showDataTopCenter{
        width:210px;
        height:100px;
        float:left;
        margin-left:10px;
        margin-top:20px;
    }
    .showDataTopRight{
        width:80px;
        height:148px;
        float:left;
        text-align:center;
    }
    .divTop{
        width:100%;
    }
    .divfooter{
        width:60%;
        height:50px;

    }
</style>